<script setup>
import { ref } from 'vue'; // 引入 Vue 3 相关的模块
import axios from 'axios';

const weiyiImageUrl = ref(null);
const yingbianImageUrl = ref(null);
const baseUrl = 'http://115.24.173.26:8002/DigitalTwinPic/baopo/';

const weiyi = ()=> {
      axios.get('/api/baopo/weiyi')
        .then((response) => {
          // 处理响应数据
          if (response.data.code === 1) {
            weiyiImageUrl.value= baseUrl + response.data.data;
            console.log(weiyiImageUrl.value);
        } else {
          alert(response.data.msg);
        }
        })
        .catch((error) => {
          console.error('获取图像失败', error);
        });
      }

const yingbian = ()=>{
        axios.get('/api/baopo/yingbian')
        .then((response) => {
          // 处理响应数据
          if (response.data.code === 1) {
            yingbianImageUrl.value= baseUrl + response.data.data;
            console.log(yingbianImageUrl.value);
        } else {
          alert(response.data.msg);
        }
        })
        .catch((error) => {
          console.error('获取图像失败', error);
        });
      }

weiyi();
yingbian();



</script>


<template >
<div class="page-vedio flex-base-page">
    <div class="first-vedio flex-base-vedio">
        <div class="first-vedio-left" id="container">
          <div class="block text-center" m="t-4">
            <span class="demonstration">实验步骤展示</span>
            <el-carousel trigger="click" height="270px" wight="370px">
              <el-carousel-item v-for="item in 5" :key="item">
                <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                <img :src="'http://115.24.173.26:8002/DigitalTwinPic/step/baopo/' + item + '.jpg'" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
    </div>
    <div class="pic1 flex-base">
        <div class="pic1-left">
          <img :src="weiyiImageUrl" class="image">
        </div>
        <div class="pic1-right flex-title">
          位移云图
        </div>
    </div>
    <div class="pic2 flex-base">
        <div class="pic2-left">
          <img :src="yingbianImageUrl" class="image">
        </div>
        <div class="pic2-right flex-title">
          塑性应变云图
        </div>
    </div>
</div>
</template>

<style scoped>
.demonstration {
  /* color: var(--el-text-color-secondary); */
  color: black;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 270px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}






 #divPlugin {
    position: relative;
    z-index: 1; /* 较低的层级 */
  }
.plugin{
  width: 100%;
  height: 100%;
  z-index: -1;
}
.page-vedio {
    height: 100%;
    width: 526px;
}
.flex-base-page {
    display: flex;
    flex-direction: column;
}
.flex-base {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: row;
}
.flex-title-first{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 10px;
}
.flex-title{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 20px;
  letter-spacing: 5px;
}
.flex-base-vedio {
    display: flex;
    /* justify-content: center;
    align-items: center; */
}
.first-vedio {
    width: 100%;
    height: 276px;
    margin-left:25px;
    margin-top:25px;

}
.first-vedio-left {
    width:400px;
    height: 276px;
}
.first-vedio-right{
  width: 66px;
  height: 235px;
  border: 1px solid #808080;
  margin-left:7px;
  margin-top:40px;
}
.pic1 {
    width: 100%;
    height: 310px;
    margin-left:25px;
    margin-top: 30px;
}
.image {
  width: 100%; /* 图像宽度与外层盒子宽度一致 */
  height: 100%; /* 图像高度与外层盒子高度一致 */
  object-fit: cover; /* 调整图像以填充整个图像框 */
}
.pic1-left {
  width: 368px;
  height: 250px;
  border: 1px solid #808080;
}
.pic1-right {
  width: 72px;
  height: 220px;
}
.pic2 {
    width: 100%;
    height: 310px;
    margin-top:-30px;
    margin-left:25px;
}
.pic2-left {
  width: 368px;
  height: 250px;
  border: 1px solid #808080;
}
.pic2-right {
  width: 72px;
  height: 220px;
}

</style>
